<template>
  <div>
    <yd-navbar title="新增旅客">
        <router-link :to="{path:'boutiqueline_friend',query: {'id': product_id, 'g_manNum': g_manNum, 'g_childNum': g_childNum, 'datetime': datetime, 'g_totalMoney': g_totalMoney}}" slot="left">
            <yd-navbar-back-icon></yd-navbar-back-icon>
        </router-link>
        <span slot="right" class="savebtn" @click="save()" ref="savebtn" v-show="editFlag == '0'">保存</span>
        <span slot="right" class="savebtn" @click="save()" ref="savebtn" v-show="editFlag == '1'">编辑</span>
    </yd-navbar>

		<div class="mui-content">
			<div class="mui-row">
				<!--头部-->
				<div class="mui-col-xs-12 lyx_header hidden">
					<div class="lyx_company_info">
						<div class="hd v_arrow_down" id="order_vendor">由<span class="name">昆明青年旅行社</span>直售</div>
						<div class="bd hidden" id="order_vendor_info">
							<p class="tips">本产品由零售商提供，有关资源确认、合同签署、行程安排等事宜，可咨询客服</p>
							<p class="tips">服务时间：周一至周日：00:00至23:59</p>
							<div class="tel">咨询电话<span class="phones_num">4008663333转52006</span></div>
							<div class="tips">您提交订单后，商家会与您联系确认</div>
						</div>
					</div>
				</div>

				<!--主体-->
				<div class="mui-col-xs-12 lyx_content">
					<!--添加联系人员-->
					<div class="order_rn_box">
						<div class="info_title mui-table-view-cell">
							<span class="title_name">联系人信息</span>
						</div>
						<div class="mui-input-group">
              <yd-cell-item>
                  <span slot="left">姓名：</span>
                  <yd-input slot="right" v-model="userobj.nickname" placeholder="姓名与证件姓名一样"></yd-input>
              </yd-cell-item>
						</div>
					</div>

					<!--证件信息-->
					<div class="order_rn_box">
						<div class="info_title"><span class="title_name">证件信息信息</span></div>
						<div class="mui-input-group">
              <yd-cell-item @click.native="selectcardtype()">
                  <span slot="left">证件类型：</span>
                  <yd-input slot="right" v-model="card_type" disabled></yd-input>
                  <hd-svg-icon slot="right" name="hd-arrow" size="15px" color="#FFA500"></hd-svg-icon>
              </yd-cell-item>
              <yd-cell-item>
                  <span slot="left">证件号码：</span>
                  <yd-input slot="right" v-model="userobj.cardid" placeholder="请输入证件号码" ref="cardno" v-on:input="inputCardno"></yd-input>
              </yd-cell-item>
              <yd-cell-item @click.native="selectcountry()">
                  <span slot="left">国籍：</span>
                  <yd-input slot="right" v-model="country" disabled></yd-input>
                  <hd-svg-icon slot="right" name="hd-arrow" size="15px" color="#FFA500"></hd-svg-icon>
              </yd-cell-item>
						</div>
					</div>

					<!--其他信息-->
					<div class="order_rn_box">
						<div class="info_title"><span class="title_name">其他信息</span></div>
						<div class="mui-input-group">
              <yd-cell-item v-show="cardTypeFlag == '1'">
                  <span slot="left">性别：</span>
                  <yd-input slot="right" v-model="sex" disabled></yd-input>
                  <hd-svg-icon slot="right" name="hd-arrow" size="15px" color="#FFA500"></hd-svg-icon>
              </yd-cell-item>
              <yd-cell-item v-show="cardTypeFlag == '1'">
                  <span slot="left">出生日期：</span>
                  <yd-input slot="right" v-model="userobj.birthday" disabled></yd-input>
                  <hd-svg-icon slot="right" name="hd-arrow" size="15px" color="#FFA500"></hd-svg-icon>
              </yd-cell-item>
              <yd-cell-item>
                  <span slot="left">联系方式：</span>
                  <yd-input slot="right" v-model="userobj.mobile" placeholder="请输入联系方式"></yd-input>
              </yd-cell-item>
						</div>
					</div>
				</div>
		  </div>
		</div>
    <!-- 底部身份弹窗 -->
    <yd-actionsheet :items="cardtype_arr" v-model="show1" ></yd-actionsheet>
    <yd-actionsheet :items="country_arr" v-model="show2" ></yd-actionsheet>
  </div>
</template>

<script>
import database from 'hdc/database';
export default {
  name: 'boutiqueadduser',
  components: {
    database
  },
  data() {
    return {
      switch1: '',
      input4: '',
      input3: '',
      userarr: [],
      datetime: this.$route.query.datetime,
      product_id: this.$route.query.id,
      g_manNum: this.$route.query.g_manNum, // 成人数量
      g_childNum: this.$route.query.g_childNum, // 儿童数量
      g_totalMoney: this.$route.query.g_totalMoney, // 总价
      total_num: parseInt(this.$route.query.g_manNum) + parseInt(this.$route.query.g_childNum),
      card_type: '',
      country: '',
      sex: '',
      userobj: {
        'id': this.$route.query.id,
        'nickname': '',
        'type': '1',
        'card_type': '',
        'cardid': '',
        'country': '',
        'sex': '',
        'birthday': '',
        'mobile': '',
        'english_surname': 'mm',
        'english_name': 'mm',
        'age': ''
      },
      cardTypeFlag: '',
      show1: false,
      show2: false,
      cardtype_arr: [],
      country_arr: [],
      tour: this.$route.query.tour, // 传过来的用户信息进行更改
      editFlag: '0' // 根据该标识判断是保存还是编辑
    }
  },
  mounted() {
    this.load();
    console.log('用户信息');
    console.log(this.tour);
    if (this.tour !== undefined) {
      this.editFlag = '1';
      this.userobj = this.tour;
      // 匹配身份类型
      for (var i = 0; i < database.card_type.length; i++) {
        const element = database.card_type[i];
        if (this.userobj.card_type === element.value) {
          this.card_type = element.label;
          if (element.value === '1') {
            this.cardTypeFlag = '1';
          }
        }
      }
      // 匹配国籍
      for (var j = 0; j < database.country_data.length; j++) {
        const element = database.country_data[j];
        if (this.userobj.country === element.value) {
          this.country = element.label;
        }
      }
    }
  },
  methods: {
    load() {
      var that = this;
      this.country_arr = database.country_data;
      this.cardtype_arr = database.card_type;
      for (var i = 0; i < database.country_data.length; i++) {
        database.country_data[i].callback = function() {
          that.userobj.country = this.value;
          that.country = this.label;
        }
      }
      for (var j = 0; j < database.card_type.length; j++) {
        database.card_type[j].callback = function() {
          that.userobj.card_type = this.value;
          that.card_type = this.label;
          if (this.value === '1') {
            that.cardTypeFlag = '1';
          }
        }
      }
      // 获取用户信息
      // console.log('用户信息');
      // console.log(this.$route.query.tour);
      // if (this.$route.query.tour !== '') {
      //   this.userobj = this.$route.query.tour;
      // }
    },
    save() {
      console.log(this.userobj);
      console.log(this.total_num);
      this.userarr.push(this.userobj);
      var params = new URLSearchParams();
      if (this.tour !== undefined) {
        params.append('user_id', this.tour.id)
      }
      params.append('nickname', this.userobj.nickname)
      // params.append('type', '1')
      params.append('card_type', this.userobj.card_type)
      params.append('cardid', this.userobj.cardid)
      params.append('country', this.userobj.country)
      params.append('sex', this.userobj.sex)
      params.append('birthday', this.userobj.birthday)
      params.append('mobile', this.userobj.mobile)
      params.append('english_surname', this.userobj.english_surname)
      params.append('english_name', this.userobj.english_name)
      console.log(params);
      if (this.userobj.nickname !== '') {
        // 保存联系人
        this.hdAjax({
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
          },
          php: true,
          url: this.API.addFriend,
          method: 'post',
          data: params,
          dataType: 'json',
          success: (resultData) => {
            console.log(resultData);
            this.$dialog.toast({mes: '添加用户成功', timeout: 1000});
            // 联系人添加成功时跳到好友列表页
            this.$router.push({path: '/boutiqueline_friend', query: {userist: this.userobj, 'id': this.product_id, 'g_manNum': this.g_manNum, 'g_childNum': this.g_childNum, 'datetime': this.datetime, 'g_totalMoney': this.g_totalMoney}})
          }
        })
      }
      console.log(this.g_manNum, this.g_childNum);
    },
    selectcountry() {
      console.log('选择国家类型');
      this.show2 = true;
    },
    selectcardtype() {
      console.log('选择身份证类型');
      this.show1 = true;
    },
    // 输入身份证号码进入焦点
    inputCardno(cardid) {
      this.isCardNo(cardid);
    },
    // 根据身份证号码获取性别和出生日期
    discriCard(UUserCard) {
      // 获取输入身份证号码
      // var UUserCard = '';
      // 获取出生日期
      var birthday = UUserCard.substring(6, 10) + '-' + UUserCard.substring(10, 12) + '-' + UUserCard.substring(12, 14);
      console.log(birthday);
      this.userobj.birthday = birthday;
      // 获取性别
      if (parseInt(UUserCard.substr(16, 1)) % 2 === 1) {
        console.log('男');
        this.userobj.sex = '1';
        this.sex = '男';
        // 是男则执行代码
      } else {
        console.log('女');
        this.userobj.sex = '2';
        this.sex = '女';
        // 是女则执行代码
      }
      // 获取年龄
      var myDate = new Date();
      var month = myDate.getMonth() + 1;
      var day = myDate.getDate();
      var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
      if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) === month && UUserCard.substring(12, 14) <= day) {
        age++;
      }
      console.log(age);
      this.userobj.age = age;
      // 年龄age
    },
    // 校验身份证
    isCardNo(card) {
      // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
      var reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/;
      if (reg.test(card) === false) {
        return false;
      }
      this.discriCard(card);
    }

  }
}
</script>

<style>
body, button, input, select, textarea {
    font: 400 14px/1.5 Arial,"Lucida Grande",Verdana,"Microsoft YaHei",hei;
}
.mui-switch:before {
    top: -7px;
    content: 'En';
}
.mui-switch.mui-active:before {
    content: '中';
}
.ksbo{
	position: absolute;
    top: 4px;
    right: 20px;
    display: inline-block;
    width: 28px;
    height: 26px;
    border: 0;
    outline: 0!important;
    background-color: transparent;
    -webkit-appearance: none;
}
.mkt-ad-ccc .cm-slide div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    margin: 0;
    padding: 0;
}

.hidden {
    display: none !important;
}
.lyx_company_info .hd, .lyx_company_info .bd{
    border-color: transparent;
    -webkit-border-image: url(https://pic.c-ctrip.com/h5/group_travel/border_half.png?20150806.png) 2 stretch;
}

.lyx_company_info {
    position: relative;
    z-index: 91;
    height: 45px;
    background-color: #FFF;
}
/*头信息*/
.lyx_company_info .hd {
    height: 44px;
    line-height: 44px;
    color: #666;
    padding: 0 15px;
    background-color: #FFF;
    border-bottom: 1px solid #e2e2e2;
    overflow: hidden;
}
.lyx_company_info .hd .name {
    color: #333;
    margin: 0 6px;
}
.v_arrow_up:after, .v_arrow_down::after {
    content: "";
    width: 5px;
    height: 5px;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -2px;
    overflow: hidden;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
}

.v_arrow_down::after {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    margin-top: -7px;
}
/*主体*/
.lyx_company_info .bd {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 10px 15px;
    background-color: #FFF;
    border-bottom: 1px solid #e2e2e2;
    box-sizing: border-box;
}

.lyx_company_info .bd .tips {
    font-size: 12px;
    color: #666;
}
.lyx_company_info .bd .tel {
    line-height: 20px;
    text-align: center;
    margin: 5px 0;
    padding: 6px 0;
    background-color: #eef8ff;
}

.mkt-ad-ccc fieldset, img, button, input {
    border: 0;
}
.lyx_content {
    padding: 10px;
    background-color: #99a5ae;
}

.order_rn_box .info_title {
    position: relative;
    padding: 0 10px;
    line-height: 42px;
    font-size: 16px;
    overflow: hidden;
    font-size: 12px;
    color: #999;
}
.order_rn_box .info_title:before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 200%;
    height: 0;
    border-top: 1px solid #d4d4d4;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}
.order_rn_box .info_title .title_name {
    color: #333;
    margin-right: 10px;
    font-size: 14px;
    font-weight: bold;
}
.order_rn_box {
    position: relative;
    background-color: #fff;
    margin-bottom: 10px;
    box-shadow: 0 3px 2px 0 rgba(102,102,102,0.30);
    border-radius: 6px;
    overflow: hidden;
}

.order_rn_info {
    padding: 10px;
    overflow: hidden;
    background-color: #f3f3f3;
    border-radius: 4px;
}
.order_rn_info .item {
    float: left;
    font-size: 12px;
    color: #999;
}
.order_rn_info .item_date {
    width: 95px;
}
.order_rn_info .item_adult, .order_rn_info .item_children, .order_rn_info .item_baby {
    width: 45px;
    text-align: center;
}
.order_rn_info .item_restrict {
    position: relative;
    float: right;
    vertical-align: middle;
    color: #009fde;
    text-align: right;
    line-height: 38px;
     padding-left: 15px;
}

.order_rn_info .item_restrict:after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 0;
    height: 200%;
    border-left: 1px solid #d4d4d4;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: right top;
    transform-origin: right top;
    padding-left: 15px;
}
.order_rn_info .numb, .order_rn_info .time {
    display: block;
    font-size: 14px;
    color: #333;
    font-weight: bold;
}
/*在表单下可以放置  选择框*/
.mui-input-row label~div{
	line-height: 40px;
    float: left;
    width: 200px;
    margin-bottom: 0;
    padding-left: 0;
    border: 0;
}


/*加载样式*/

.weui-mask_transparent {
	position: fixed;
	z-index: 1000;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

.weui-toast {
	position: fixed;
	z-index: 5000;
	width: 7.6em;
	min-height: 7.6em;
	top: 180px;
	left: 50%;
	margin-left: -3.8em;
	background: rgba(40, 40, 40, 0.75);
	text-align: center;
	border-radius: 5px;
	color: #FFFFFF;
}

.weui-icon_toast {
	margin: 22px 0 0;
	display: block;
}

.weui-icon_toast.weui-icon-success-no-circle:before {
	color: #FFFFFF;
	font-size: 55px;
}

.weui-icon_toast.weui-loading {
	margin: 30px 0 0;
	width: 38px;
	height: 38px;
	vertical-align: baseline;
}

.weui-toast__content {
	margin: 0 0 15px;
}

.weui-loading {
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
	-webkit-animation: weuiLoading 1s steps(12, end) infinite;
	animation: weuiLoading 1s steps(12, end) infinite;
	background: transparent url() no-repeat;
	background-size: 100%;
}
@-webkit-keyframes weuiLoading {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
            transform: rotate3d(0, 0, 1, 360deg);
  }
}
@keyframes weuiLoading {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
            transform: rotate3d(0, 0, 1, 360deg);
  }
}
/*加载样式 结束*/
.savebtn {
  color: #63B8FF;
  font-size: 15px;
}
.yd-actionsheet {
  height: 130px;
  overflow-y: scroll;
}
</style>
